<template>
  <div class="content-wraper">
    <el-row class="content">
      <el-col :span="6" class="content-left">
        <tree-box
          v-model="selectedNode"
          :data="data"
          title="组织机构"
        />
      </el-col>
      <el-col :span="18" class="content-right">
        <div class="btns">
          <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          <el-button type="success" :loading="editLoading" icon="el-icon-edit" @click="modify">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="del">删除</el-button>
          <!-- <el-checkbox v-model="checked" style="margin-left: 10px;">显示禁用机构</el-checkbox> -->
        </div>
        <div class="detail">
          <manage-detail ref="modifyForm" :data="orgDetail" />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :close-on-click-modal="false"
      title="新增机构"
      :visible.sync="modalVisibile"
      width="700px"
      center
    >
      <div><el-tag type="success">上级机构：{{ selectedNode && selectedNode.name }}</el-tag></div>
      <manage-detail ref="form" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="modalVisibile = false">取 消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TreeBox from '@/components/TreeBox'
import manageDetail from './components/manageDetail.vue'
import {
  getOrganizationTree,
  getOrganizationDetail,
  addOrganization,
  deleteOrganization,
  updateOrganization
} from '@/api/manage'
export default {
  name: 'Manage',
  components: {
    TreeBox,
    manageDetail
  },
  data() {
    return {
      saveLoading: false,
      editLoading: false,
      checked: false,
      data: [],
      filterText: '',
      orgDetail: {},
      selectedNode: null,
      modalVisibile: false,
      optType: 'add'
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    selectedNode(newValue) {
      this.getDetail(newValue)
    }
  },

  mounted() {
    this.initTree()
  },
  methods: {
    getDetail(data) {
      const { id } = data
      if (id) {
        getOrganizationDetail({ organizationId: id }).then(res => {
          this.orgDetail = res.data || {}
        })
      }
    },
    initTree() {
      getOrganizationTree().then(res => {
        const { nodes } = res.data || {}
        this.data = nodes || []
      })
    },
    add() {
      if (!this.selectedNode) {
        this.$message({
          type: 'error',
          message: '请选择一个机构!'
        })
        return
      }
      this.optType = 'add'
      this.modalVisibile = true
    },
    del() {
      if (!this.selectedNode) {
        this.$message({
          type: 'error',
          message: '请选择一个机构!'
        })
        return
      }
      this.$confirm('确定要删除该机构吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrganization({
          organizationId: this.selectedNode.id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initTree()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    modify() {
      if (!this.selectedNode) {
        this.$message({
          type: 'error',
          message: '请选择一个机构!'
        })
        return
      }
      this.$refs.modifyForm.validateForm(valid => {
        this.editLoading = true
        if (valid) {
          const params = {
            ...this.$refs.modifyForm.form,
            id: this.selectedNode.id
          }
          updateOrganization(params).then(res => {
            this.editLoading = false
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.initTree()
            } else {
              this.$message({
                type: 'error',
                message: msg || res.msg
              })
            }
          }).catch(() => {
            this.editLoading = false
          })
        }
      })
    },
    save() {
      this.$refs.form.validateForm(valid => {
        if (valid) {
          this.saveLoading = true
          const params = {
            ...this.$refs.form.form,
            parentId: this.selectedNode.id
          }
          addOrganization(params).then(res => {
            this.saveLoading = false
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.modalVisibile = false
              this.$refs.form.resetForm()
              this.initTree()
            } else {
              this.$message({
                type: 'error',
                message: msg || res.msg
              })
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  height:100%;
  .content-left,.content-right{
    height: 100%;
  }
  .content-left{
    padding-right: 10px;
    border-right: 1px solid #dedede;
  }
  .content-right{
    padding-left: 10px;
    .detail{
      height: calc(100% - 40px);
      margin-top: 10px;
      overflow: auto;
    }
  }
  .tree{
    height: calc(100% - 40px);
    padding-top: 10px;
  }
}
</style>
